<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/vue.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<!--数据显示  表达式和 v-text指令-->
			{{message}}
			<span v-text="info"></span>
			
			<!--双向数据绑定   v-model-->
			<input type="text" name="" id="" value="" v-model="message" />
			<hr />
			
			<!--循环数组显示数据-->
			<ul>
				<li v-for="(item,index) in lists">{{item.id}}:{{item.title}}---{{index}}</li>
			</ul>
			
			<!--触发事件-->
			<input type="button" v-on:click="go()" value="点击1" />
			<input type="button" @click="run()" value="点击2" />
			
		</div>
		<script>
			new Vue({
				//挂载点 element
				el:"#app",
				data:{
					//数据
					message:'hello world',
					info:'我是Vue',
					lists:[
						{id:1,title:'去吃饭'},
						{id:2,title:'打篮球'},
						{id:3,title:'打羽毛球'},
						{id:4,title:'敲代码'},
						{id:5,title:'睡觉'},
					]
				},
				//angular里的写法
				//$scope.message = "hello world";
				//$scope.info = "我是Vue";
				methods:{
					go(){
						console.log('点击1');
					},
					run(){
						console.log('点击2');
					}
				}
			})
		</script>
	</body>
</html>
